<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/layer.js}"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div th:replace="client/header::header('订单详情',null)"></div>
<body>
<article class="main-content post-page">
    <div class="post-header">
        <div>
            <div class="form-row">
                <div class="form-group col-md-8">
                    <h3 th:if="${order.status} eq 0"><th:block />已退款</h3>
                    <h3 th:if="${order.status} eq 1"><th:block />待配送</h3>
                    <h3 th:if="${order.status} eq 2"><th:block/>配送中</h3>
                    <h3 th:if="${order.status} eq 3"><th:block/>已确定到达</h3>
                    <h3 th:if="${order.status} eq 4"><th:block />退款中</h3>
                    <h4>地址</h4>
                    <p th:text="${address}"></p>
                </div>
            </div>
            <div class="form-group">
                <label for="inputGoods">商品详情</label>
                <div th:each="goods: ${goodsList}">
                    <input type="text" class="form-control" id="inputGoods" hidden="hidden" th:name="goodsId"
                           th:value="${goods.id}">
                    <div class="post-data">
                        <goods class="am-g blog-entry-article">
                            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                                <img width="50%" class="am-u-sm-12" th:src="@{${goods.image}}"/>
                            </div>
                            <div class="am-u-lg-3 am-u-md-12 am-u-sm-12 blog-entry-text">
                                <span>&nbsp;&nbsp;&nbsp;</span>
                                <h2>
                                    <div><a style="color: #0f9ae0;font-size: 20px;"
                                            th:href="${commons.permalink(goods.id)}" th:text="${goods.title}"/>
                                    </div>
                                </h2>
                                <!-- 摘要-->
                                <div style="font-size: 16px;" th:utext="${commons.intro(goods,75)}"/>
                                <p>¥<span class="info-text" th:text="${goods.price}"></span></p>
                            </div>
                        </goods>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-8">
                    <h2>订单详细！</h2><br>
                    <h4>订单号<span th:text="${order.id}"></span></h4>
                    <h4>下单日期<span th:text="${#dates.format(order.createDate,'yyyy-MM-dd HH:mm:ss')}"></span></h4>
                    <h4>总金额<span th:text="${order.totalAmount}"></span></h4>
                </div>
            </div>
            <button>
                <a th:href="@{/}" class="btn btn-primary">返回主页
                </a>
            </button>
        </div>
    </div>
    <br/>
</article>
<div th:replace="client/footer::footer"></div>
<!-- 使用layer.js实现图片缩放功能 -->
<script type="text/JavaScript">
    $('.post-content img').on('click', function () {
        var imgurl = $(this).attr('src');
        var w = this.width * 2;
        var h = this.height * 2 + 50;
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            area: [w + "px", h + "px"],
            shadeClose: true, //点击遮罩关闭
            content: '\<\div style="padding:20px;">' +
                '\<\img style="width:' + (w - 50) + 'px;" src=' + imgurl + '\>\<\/div>'
        });
    });

    function addGoodsToCar() {

    }
</script>
</body>
</html>